define('pc/js/mod/home/vue-home-index', [
    'utils/XTemplate',
    'utils/fetchEnhancer',
    'utils/Time'
], (XTemplate, fetch, Time) => {

Vue.prototype.Time = Time;

const VueHomeIndex = {
    props: ['strUid'],
    data: function() {
        return {
            info: null
        }
    },
    methods: {
        fetchInfo: function() {
            fetch('/api/account/getstatistics?uid=' + this.strUid).then((json) => {
                if(0 === json.status) {
                    this.info = json.data.data;
                }
            });
        },
        fetchLevelData: function(callback) {
            let that = this;
            fetch('/api/level/get').then((res) => {
                if(0 === res.status) {
                    that.levelData = res.data.data;
                    callback();
                }
            });
        },
        showLevelInfo: function() {
            let that = this;
            if(null === this.levelData) {
                this.fetchLevelData(() => {
                    let html = that.levelTemplate.run({
                        list: that.levelData
                    });
                    XUI.dialog.showWithBtn(html, '等级', XUI.BTN_OK, {dialogWidth: 320});
                });

            } else {
                let html = this.levelTemplate.run({
                    list: this.levelData
                });
                XUI.dialog.showWithBtn(html, '等级', XUI.BTN_OK, {dialogWidth: 320});
            }
        }
    },
    created: function() {
        this.levelData = null;
        this.levelHtml =
`<% var list = data.list; %>
<div style="height: 300px; overflow: auto">
<table class="x-table small">
<tr><th>最小经验</th><th>最大经验</th><th>等级</th></tr>
<% if(list){ for(var i=0,len=list.length; i<len; i++){ %>
<tr><td><%= list[i].minexp %></td><td><%= list[i].maxexp %></td><td><%= list[i].level_name %></td></tr>
<%  }} %>
</table>
</div>`;

        this.levelTemplate = new XTemplate();
        this.levelTemplate.compile(this.levelHtml);
    },
    mounted: function() {
        this.fetchInfo();
    },
    template:
`<div class="home-index-wrapper">
    <table class="x-table">
        <tr><td width="100" align="right">UID</td><td>{{ strUid }}</td></tr>
        <tr><td width="100" align="right">经验</td><td>{{ info ? info.credit.experience : '--' }}</td></tr>
        <tr><td width="100" align="right">等级</td><td><span @click="showLevelInfo" style="cursor: pointer">{{ info ? info.credit.level_name : '--' }}</span></td></tr>
        <tr><td width="100" align="right">加入时间</td><td>{{ info ? Time.format('y-m-d', info.reg_time * 1000) : '--' }}</td></tr>
    </table>
</div>`
};

return VueHomeIndex;

});
